import { Spin, Tabs } from 'antd';
import { LabeledValue } from 'antd/lib/select';
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { getSettings, getUserMsg, getUserWorks, InitUserDetail, IUserDetail, IWorkItem } from '../../api/threeApi';
import Footer from '../../components/Footer/Footer';
import Goback2Top from '../../components/Goback2Top';
import Radio from '../Radio/Radio';
import './Discovery.scss';

type IPropsIndex = RouteComponentProps;

export default function Community(props: IPropsIndex) {
	const [dataListHot, setDataListHot] = useState<IWorkItem[]>([]);
	const [dataListNew, setDataListNew] = useState<IWorkItem[]>([]);
	const [loadingHot, setLoadingHot] = useState(true);
	const [loadingNew, setLoadingNew] = useState(true);

	useEffect(() => {
		fetchDataHot();
		fetchDataNew();
	}, []);

	const fetchDataHot = () => {
		setLoadingHot(true);
		getUserWorks({
			offset: 0,
			limit: 10,
			sort: 'hottest',
		})
			.then((res) => {
				setDataListHot(res.items);
			})
			.catch((err) => {})
			.finally(() => setLoadingHot(false));
	};

	const fetchDataNew = () => {
		setLoadingNew(true);
		getUserWorks({
			offset: 0,
			limit: 10,
			sort: 'newest',
		})
			.then((res) => {
				setDataListNew(res.items);
			})
			.catch((err) => {})
			.finally(() => setLoadingNew(false));
	};

	const ListItem = (item: IWorkItem) => {
		return (
			<div className="mr20 mb32 bg-w ov-h" style={{ borderRadius: 6 }}>
				<div
					className="w220 h156 bg-theme2 br0 ov-h cp"
					onClick={() => {
						props.history.push(`/workDetail/${item.id}`);
					}}
				>
					<img className="w100" src={item.cover} alt="" />
				</div>
				<div className="pb14 plr8 w220">
					<div className="strong pt8">{item.name}</div>
					<div className="d-f ac pt8">
						<img className="mr12" src={require('../../image/good.png').default} alt="" />
						<span>{item.num_likes}</span>
						<img className="mlr12" src={require('../../image/eye.png').default} alt="" />
						<span>{item.num_views}</span>
					</div>
					<div
						className="d-f ac pt8 w100 ellip1 cp"
						onClick={() => {
							props.history.push(`/userIndex/${item.creator.uid}`);
						}}
					>
						<img
							className="w32 br100"
							src={item.creator.avatar || require('../../image/user2.png').default}
						/>
						<span className="c-hint-b pl6 ellip1">{item.creator.name}</span>
					</div>
				</div>
			</div>
		);
	};

	return (
		<div className="content userCenter">
			<Goback2Top />
			<div className="p-r">
				<img className="w100" src={require('../../image/community.png').default} alt="" />
				<div className="d-f jc ac w100 p-a c-text-w" style={{ top: 80 }}>
					<div>
						<div className="" style={{ fontSize: 60 }}>
							三只狮子编程
						</div>
						<div className="fs30">让孩子掌握创造未来的语言</div>
					</div>
				</div>
			</div>
			<div className="d-f jc">
				<div className="w1200 br10 p-r pt28">
					<div className="d-f ac pb40">
						<img src={require('../../image/collect2.png').default} alt="" />
						<span className="strong fs20 pl16">精选作品</span>
					</div>
					<Spin spinning={loadingNew}>
						<div className="d-f fw">
							{dataListNew.map((item) => (
								<ListItem {...item} key={`new${item.id}`} />
							))}
						</div>
					</Spin>

					<div className="d-f ac pt20 pb40">
						<img src={require('../../image/hot.png').default} alt="" />
						<span className="strong fs20 pl16">热门作品</span>
					</div>
					<Spin spinning={loadingHot}>
						<div className="d-f fw">
							{dataListHot.map((item) => (
								<ListItem {...item} key={`hot${item.id}`} />
							))}
						</div>
					</Spin>
				</div>
			</div>
			<Footer {...props} />
		</div>
	);
}
